<template>
  <div>
    <header-option>
      <template v-slot:btn>
        <div>
          <cs-btn type="primary" btnText="添加" @click.native="handleAddGoodsTypeBtnClick" />
          <cs-btn btnText="删除" @click.native="dellistfn" />
        </div>
      </template>
      <template v-slot:input>
        <cs-label labelText="参数名称" width="241">
          <el-input class="cs-input" v-model.trim="model.goodsType" clearable></el-input>
        </cs-label>
        <el-date-picker
          @change="changetimes"
          class="times"
          v-model="time_quantum"
          type="daterange"
          size="large"
          align="right"
          unlink-panels
          value-format="yyyy-MM-dd"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptions"
        >
        </el-date-picker>
        <cs-btn type="search" @click.native="searchBtnClick" btnText="查询" class="searcg_btn" />
      </template>
    </header-option>
  </div>
</template>

<script>
import headerOption from '@/components/headerOption/headerOption.vue'
import csBtn from '@/components/cs-btn/cs-btn.vue'
import csLabel from '@/components/cs-label/cs-label.vue'

import { deleteGoodsType } from '@/service/operate/goodsType_manage/goodsType_manage'

import _ from 'lodash'

export default {
  name: 'goodsTypeManageHeader',
  components: {
    headerOption,
    csBtn,
    csLabel
  },
  created() {
    this.$bus.$on('goodsTypeSelectNum', (selectLength, selectId) => {
      console.log(selectLength, selectId)
      this.selectLength = selectLength
      this.selectId = selectId
    })
  },
  beforeDestroy() {
    this.$bus.$off('searchGoodsTypeBtnClick')
    this.$bus.$off('displayAddGoodsTypeDialog')
    this.$bus.$off('deleteGoodsTypeSuccess')
  },
  data() {
    return {
      model: {
        offset: 1,
        limit: 10,
        goodsType: '',
        startTime: '',
        endTime: ''
      },
      time_quantum: '',
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      },
      selectLength: 0,
      selectId: []
    }
  },
  watch: {
    'model.goodsType'(newValue) {
      if (newValue === '') {
        this.$bus.$emit('searchGoodsTypeBtnClick', this.model)
      }
    },
    time_quantum(newValue) {
      if (newValue === null) {
        this.$bus.$emit('searchGoodsTypeBtnClick', this.model)
      }
    }
  },
  methods: {
    handleAddGoodsTypeBtnClick() {
      this.$bus.$emit('displayAddGoodsTypeDialog')
    },
    changetimes(data) {
      if (data) {
        this.model.startTime = data[0]
        this.model.endTime = data[1]
      } else {
        this.model.startTime = ''
        this.model.endTime = ''
      }
    },
    async dellistfn() {
      if (this.selectLength === 0) {
        this.$message({
          message: '请选择需要删除的货物类型',
          type: 'warning'
        })
      } else {
        const text = '您已选择' + this.selectLength + '项，确认删除？'
        const _this = this
        this.$confirm(text)
          .then(async () => {
            this.selectId = this.selectId.join(',')
            const data = await deleteGoodsType({ ids: this.selectId })
            console.log(data)
            if (data.code === 0) {
              this.$bus.$emit('deleteGoodsTypeSuccess')
              this.$message({
                message: '删除成功',
                type: 'success'
              })
            } else {
              this.$message.error('删除失败')
            }
          })
          .catch((err) => {
            console.log(err)
          })
      }
    },
    searchBtnClick: _.throttle(function () {
      this.$bus.$emit('searchGoodsTypeBtnClick', this.model)
    }, 1000)
  }
}
</script>

<style scoped>
/* 头部样式start */
.cs-input >>> .el-input__inner {
  width: 152px !important;
  height: 32px !important;
  border-radius: 0 !important;
}

.times {
  margin-right: 20px;
  height: 32px !important;
  line-height: 32px !important;
  padding: 0 4px !important;
  border-radius: 0;
}

.el-input >>> .el-input__icon {
  line-height: 32px;
}

.cs_select >>> .el-input__inner {
  width: 152px;
  height: 32px;
  line-height: 32px;
  border-radius: 0;
}

.creatTimeLabel {
  width: 455px;
}

.el-date-editor >>> .el-input__inner {
  width: 172px;
  height: 32px;
  line-height: 32px !important;
  border-radius: 0;
  padding-left: 16px;
  padding-right: 0;
  color: #939393;
  background-color: #ebeef2;
}

.el-date-editor >>> .el-input__icon {
  line-height: 32px;
}

.selectTimeIcon_middle {
  font-size: 23px;
  color: #e1e1e1;
  padding: 0 5px;
}

.searcg_btn {
  margin-right: 30px;
}

/* 头部样式end */
</style>
